const path = require('path')
// 这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
const htmlWebpackPlugin=require('html-webpack-plugin')
// 上面这个插件的两个作用：1.自动在内存中根据指定页面生成一个内存的页面；2.自动把打包好的bundle.js追加到页面中去，不用手动引入

module.exports = {
    //在配置文件中，需要手动指定入口和出口
    entry: path.join(__dirname, './src/main.js'),// 入口，表示要使用webpack打包哪个文件    注：“__dirname”这里是双下划线
    output: { // 输出文件相关的配置
        path: path.join(__dirname, './dist'), // 指定打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' // 指定输出的文件名称
    },
    plugins:[ // 配置插件的节点
        new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
            template:path.join(__dirname, './src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html'//指定生成的页面名称
        })
    ],
    module:{// 这个节点，用于配置所有的第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/, use:['style-loader','css-loader']},//使用正则表达式，配置处理.css文件的第三方loader规则，解释：“//”两个双斜线之中应用正则表达式，“\.css$”所有以.css结尾的文件，“use:['style-loader','css-loader']” 使用style-loader和css-loader 两个loader进行处理
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less 文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=29.9&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
            //这里如果use后只有loader名称而没有传参的话（'url-loader'）则到页面上，默认是将图片进行base64编码，把图片转化为字符串从而降低图片大小，但也有其缺点，所以要禁止编码就通过传递参数方法：?limit=num，这里的num取值>图片大小时，会将图片进行base64编码，否则不进行编码，注：单位是byte;
            //即便进行了上述限制，没有进行base64编码，图片名也跟原本的图片名不一样，url-loader会随机生成一个图片名，防止重名，但如果我就是两个放用同一张图片（也就是防止图片名被修改），则也是通过传递参数来实现：&name=[name].[ext]，其中[name]保持原有名称，[ext]保持原有后缀名
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件的 loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置Babel来转换高级的ES语法
            {test:/\.vue$/,use:'vue-loader'}//处理 .vue 文件的loader
        ]
    },
    resolve:{
        alias:{//修改 vue 被导入时候的包的路径
            // 'vue$':'vue/dist/vue.js'
        }
    }
}